<template>
  <view class="container">
    <!-- 标题区 -->
    <view class="header">
      <text class="title">密码找回</text>
      <text class="subtitle">通过账号+邮箱验证重置密码</text>
    </view>

    <!-- 表单区 -->
    <view class="form-card">
      <!-- 账号输入 -->
      <view class="input-group">
        <text class="label">账号</text>
        <input 
          v-model="form.userName"
          placeholder="请输入注册账号"
          class="input-field"
          :class="{ 'error-border': errors.userName }"
          @blur="validateUserName"
        />
        <text v-if="errors.userName" class="error-tip">{{ errors.userName }}</text>
      </view>

      <!-- 邮箱+验证码 -->
      <view class="input-group">
        <text class="label">验证邮箱</text>
        <view class="code-wrapper">
          <input
            v-model="form.email"
            placeholder="请输入注册邮箱"
            class="email-input"
            :class="{ 'error-border': errors.email }"
            @blur="validateEmail"
          />
          <button 
            :class="['code-btn', { 'disabled': isCounting }]"
            @click="handleSendCode"
            :disabled="isCounting || !isEmailValid"
          >
            {{ isCounting ? `${countdown}s后重发` : '获取验证码' }}
          </button>
        </view>
        <text v-if="errors.email" class="error-tip">{{ errors.email }}</text>
      </view>

      <!-- 验证码 -->
      <view class="input-group">
        <text class="label">验证码</text>
        <input
          v-model="form.code"
          placeholder="请输入验证码"
          class="input-field"
          maxlength="6"
          :class="{ 'error-border': errors.code }"
        />
        <text v-if="errors.code" class="error-tip">{{ errors.code }}</text>
      </view>

      <!-- 新密码 -->
      <view class="input-group">
        <text class="label">新密码</text>
        <input
          v-model="form.password"
          placeholder="8-20位字母数字组合"
          password
          class="input-field"
          :class="{ 'error-border': errors.password }"
        />
        <text v-if="errors.password" class="error-tip">{{ errors.password }}</text>
      </view>

      <button 
        class="submit-btn" 
        :class="{ 'disabled': !isFormValid }"
        @click="handleSubmit"
      >
        立即重置
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { http } from '@/utils/requestUtil'

const form = reactive({
  userName: '',
  email: '',
  code: '',
  password: ''
})

const errors = reactive({
  userName: '',
  email: '',
  code: '',
  password: ''
})

// 验证码倒计时逻辑
const isCounting = ref(false)
const countdown = ref(0)
let timer = null

const validateUserName = () => {
  if (!form.userName.trim()) {
    errors.userName = '账号不能为空'
  } else {
    errors.userName = ''
  }
}

const validateEmail = () => {
  const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!form.email) {
    errors.email = '邮箱不能为空'
  } else if (!emailReg.test(form.email)) {
    errors.email = '邮箱格式不正确'
  } else {
    errors.email = ''
  }
}

const isEmailValid = computed(() => {
  return form.email && !errors.email
})

// 发送验证码
const handleSendCode = async () => {
  if (!isEmailValid.value) return

  try {
    const url = `/bole/sendCode?userName=${form.userName}&email=${form.email}`;
	const res = await http.post(url);
    if (res.code === 200) {
      isCounting.value = true
      countdown.value = 300
      timer = setInterval(() => {
        if (countdown.value <= 0) {
          clearInterval(timer)
          isCounting.value = false
          return
        }
        countdown.value--
      }, 1000)
      
      uni.showToast({ title: '验证码已发送', icon: 'success' })
    }
  } catch (error) {
	  console.log(error)
    uni.showToast({ title: error.msg || '发送失败', icon: 'none' })
  }
}

// 提交重置
const handleSubmit = async () => {
  if (!isFormValid.value) return

  try {
 const url = `/bole/resetPassword?email=${form.email}&code=${form.code}&password=${form.password}&userName=${form.userName}`;
 const res = await http.post(url);
    if (res.code === 200) {
      uni.showToast({ title: '密码重置成功', icon: 'success' })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  } catch (error) {
    uni.showToast({ title: error.msg || '重置失败', icon: 'none' })
  }
}

// 表单验证状态
const isFormValid = computed(() => {
  return form.userName && 
         form.email &&
         form.code.length >0 &&
         form.password.length >= 5 &&
         !Object.values(errors).some(v => v)
})
</script>

<style lang="scss" scoped>
$primary-color: #409eff;

.container {
  padding: 40rpx;
  background: #f8faff;
  min-height: 100vh;
}

.header {
  text-align: center;
  padding: 60rpx 0;
  
  .title {
    font-size: 48rpx;
    color: $primary-color;
    font-weight: 600;
    margin-bottom: 20rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.form-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(64,158,255,0.1);
}

.input-group {
  margin-bottom: 40rpx;
  
  .label {
    display: block;
    font-size: 32rpx;
    color: #333;
    margin-bottom: 16rpx;
  }
}

.code-wrapper {
  display: flex;
  gap: 20rpx;
  align-items: center;
  
  .email-input {
    flex: 1;
  }
}

.input-field, .email-input {
  width: 100%;
  height: 88rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  transition: all 0.3s;
  
  &:focus {
    border-color: $primary-color;
    box-shadow: 0 0 8rpx rgba(64,158,255,0.2);
  }
}

.error-border {
  border-color: #ff4d4d !important;
}

.error-tip {
  color: #ff4d4d;
  font-size: 24rpx;
  margin-top: 8rpx;
  display: block;
}

.code-btn {
  width: 220rpx;
  height: 88rpx;
  background: $primary-color;
  color: #fff;
  border-radius: 12rpx;
  font-size: 28rpx;
  transition: all 0.3s;
  
  &.disabled {
    background: #c0c4cc;
    cursor: not-allowed;
  }
}

.submit-btn {
  width: 100%;
  height: 96rpx;
  background: $primary-color;
  color: #fff;
  border-radius: 48rpx;
  font-size: 32rpx;
  margin-top: 60rpx;
  
  &.disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}
</style>